<template>
	<view>
		<div class="top">
			<img class="bg-top" src="@/static/bg-top.png" alt="bg">
			<p>智慧城市大脑管理大屏</p>
			<img src="@/static/logo.png" alt="logo" class="logo">

			<div class="time-weather">
				<div class="time-box">
					<div class="time">14:44:13</div>
					<div class="date">2023-09-01 星期五</div>
				</div>
				<div class="weather-box">
					<div class="weather">多云转晴</div>
					<div class="temperature">14～24­°C</div>
				</div>
			</div>
		</div>
		<div class="nav-data-list">
			<img src="@/static/decorate-left.png" alt="decorate" class="decorate">
			<div class="nav-data-item">
				<div>村委总数</div>
				<div class="blue">345</div>
			</div>
			<div class="nav-data-item">
				<div>月卡用户</div>
				<div class="blue">5789</div>
				<div>
					<div>黑名单：<text class="blue">232</text></div>
					<div>白名单：<text class="blue">5678</text></div>
				</div>
			</div>
			<div class="nav-data-item">
				<div>今日月卡实收(元)</div>
				<div class="orange">289.99</div>
				<div>
					<div>较昨日<text class="green">+33.55%</text></div>
				</div>
			</div>
			<div class="nav-data-item">
				<div>本周月卡实收(元)</div>
				<div class="orange">2687.99</div>
				<div>
					<div>较上周<text class="red">-23.00%</text></div>
				</div>
			</div>
			<div class="nav-data-item">
				<div>本月月卡实收(元)</div>
				<div class="orange">6888.89</div>
				<div>
					<div>较上月<text class="green">+1.55%</text></div>
				</div>
			</div>
			<div class="nav-data-item">
				<div>当前欠款金额(元)</div>
				<div>16888.89</div>
				<div>
					<div>逃费次数：<text class="blue">232</text></div>
					<div>逃费金额：<text class="blue">¥5678.00</text></div>
				</div>
			</div>
			<img src="@/static/decorate-right.png" alt="decorate" class="decorate">
		</div>

		<div class="clll-box">
			<div class="box-title">
				<div class="triangle"></div>
				<div>车辆流量</div>
				<div>查看详情</div>
			</div>
			<div class="box-main">
				<div class="clll-nav-list">
					<div class="clll-nav-item">
						<img src="@/static/icon-01.png" alt="icon" class="icon">
						<div class="blue">50</div>
						<div>今日入场数</div>
					</div>
					<div class="clll-nav-item">
						<img src="@/static/icon-01.png" alt="icon" class="icon">
						<div class="blue">785</div>
						<div>本周入场数</div>
					</div>
					<div class="clll-nav-item">
						<img src="@/static/icon-01.png" alt="icon" class="icon">
						<div class="blue">8785</div>
						<div>本月入场数</div>
					</div>
					<div class="clll-nav-item">
						<img src="@/static/icon-02.png" alt="icon" class="icon">
						<div class="orange">2785.12</div>
						<div>本月实收金额</div>
					</div>
					<div class="clll-nav-item">
						<img src="@/static/icon-03.png" alt="icon" class="icon">
						<div class="yellow">8785</div>
						<div>本月优惠金额</div>
					</div>
				</div>

				<div id="clll-echart" ref="clllEchart"></div>
				<div class="select-time">
					<div>2023年09月</div>
					<div class="arrows-dowm"></div>
				</div>
			</div>
		</div>

		<div class="tsjy-box">
			<div class="box-title">
				<div class="triangle"></div>
				<div>投诉建议</div>
				<div>查看详情</div>
			</div>
			<div class="box-main">
				<div class="main-data-list">
					<div>
						<div class="orange">25</div>
						<div>待指派</div>
					</div>
					<div>
						<div style="color: #DDF7FF;">53</div>
						<div>跟进中</div>
					</div>
					<div>
						<div class="blue">329</div>
						<div>已完成</div>
					</div>
					<div>
						<div class="yellow">16</div>
						<div>已逾期</div>
					</div>
				</div>
				<div class="select-time">
					<div>2023年09月</div>
					<div class="arrows-dowm"></div>
				</div>
				<div id="tsjy-echart-left" ref="tsjyEchartLeft"></div>
				<div id="tsjy-echart-right" ref="tsjyEchartRight"></div>
			</div>
		</div>

		<div class="rcgl-box">
			<div class="box-title">
				<div class="triangle"></div>
				<div>投诉建议</div>
				<div>查看详情</div>
			</div>
			<div class="box-main">
				<div class="main-data-list">
					<div>
						<div class="blue">25</div>
						<div>今日查处</div>
					</div>
					<div>
						<div class="blue">53</div>
						<div>本周查处</div>
					</div>
					<div>
						<div class="blue">329</div>
						<div>本月查处</div>
					</div>
				</div>
				<div class="select-time">
					<div>2023年09月</div>
					<div class="arrows-dowm"></div>
				</div>
				<div id="rcgl-echart-left" ref="rcglEchartLeft"></div>
				<div id="rcgl-echart-right" ref="rcglEchartRight"></div>
			</div>
		</div>
	</view>
</template>

<script>
	import * as echart from 'echarts'
	import '@/static/echarts-tooltip-carousel.js'
	export default {
		data() {
			return {
				time: '',
				date: '',
				weather: '',
				temperature: '',
				clllEchart: null,
				clllEchartOption: {
					grid: {
						top: '20%',
						bottom: 40,
						left: 60,
						right: 60,
					},
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'shadow'
						},
						borderColor: 'rgba(43,142,243,0.5)',
						borderWidth: 2,
						textStyle: {
							color: 'rgba(153, 153, 153, 1)',
							fontSize: 10,
							lineHeight: 14
						}
					},
					legend: {
						itemWidth: 20,
						itemHeight: 4,
						textStyle: {
							color: '#fff',
							fontSize: 10,
						},
						data: [{
							name: '入场数(辆)',
							itemStyle: {
								color: '#2BC5F3'
							}
						}, {
							name: '出场数(辆)',
							itemStyle: {
								color: '#1D7AD9'
							}
						}, {
							name: '实收金额(元)',
							itemStyle: {
								color: '#FD8F21'
							}
						}, {
							name: '优惠金额(元)',
							itemStyle: {
								color: '#FDDB21'
							}
						}]
					},
					xAxis: {
						data: ['1日', '2日', '3日', '4日', '5日', '6日'],
						axisLine: {
							lineStyle: {
								color: '#ccc'
							}
						},
						axisTick: {
							show: false
						},
						axisLabel: {
							color: '#fff',
							fontSize: 12,
						}
					},
					yAxis: [{
							type: 'value',
							name: '单位:辆',
							axisLine: {
								show: true,
								lineStyle: {
									color: '#1D7AD9'
								}
							},
							splitLine: {
								lineStyle: {
									color: 'rgba(204, 204, 204, .3)',
									type: 'dashed'
								}
							},
							nameTextStyle: {
								color: '#fff',
								fontSize: 12
							},
							axisLabel: {
								color: '#fff',
								fontSize: 12,
							},
							// min: 0,
							// max: 250,
							// interval: 50,
							// axisLabel: {
							//   formatter: '{value} ml'
							// }
						},
						{
							type: 'value',
							name: '单位:元',
							axisLine: {
								show: true,
								lineStyle: {
									color: '#AF6113'
								}
							},
							splitLine: {
								show: false,
							},
							nameTextStyle: {
								color: '#fff',
								fontSize: 12
							},
							axisLabel: {
								color: '#fff',
								fontSize: 12,
							}
							// min: 0,
							// max: 25,
							// interval: 5,
							// axisLabel: {
							//   formatter: '{value} °C'
							// }
						}
					],
					series: [{
							name: '入场数(辆)',
							type: 'bar',
							barGap: 0,
							data: [5, 20, 36, 10, 10, 20],
							itemStyle: {
								color: {
									type: 'linear',
									x: 0,
									y: 0,
									x2: 0,
									y2: 1,
									colorStops: [{
										offset: 0,
										color: 'rgba(43, 197, 243, 1)' // 0% 处的颜色
									}, {
										offset: 1,
										color: 'rgba(43, 197, 243, 0)' // 100% 处的颜色
									}],
									global: false // 缺省为 false
								}
							}
						},
						{
							name: '出场数(辆)',
							type: 'bar',
							barGap: 0,
							data: [10, 40, 46, 20, 20, 30],
							itemStyle: {
								color: {
									type: 'linear',
									x: 0,
									y: 0,
									x2: 0,
									y2: 1,
									colorStops: [{
										offset: 0,
										color: 'rgba(29, 122, 217, 1)' // 0% 处的颜色
									}, {
										offset: 1,
										color: 'rgba(43, 197, 243, 0)' // 100% 处的颜色
									}],
									global: false // 缺省为 false
								}
							}
						},
						{
							name: '实收金额(元)',
							type: 'line',
							symbol: 'circle',
							symbolSize: 4,
							yAxisIndex: 1,
							itemStyle: {
								color: 'rgba(253, 143, 33, 1)',
								borderWidth: 0,
							},
							lineStyle: {
								color: 'rgba(253, 143, 33, 1)',
							},
							data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, ]
						},
						{
							name: '优惠金额(元)',
							type: 'line',
							symbol: 'circle',
							symbolSize: 4,
							yAxisIndex: 1,
							itemStyle: {
								color: 'rgba(253, 219, 33, 1)',
								borderWidth: 0,
							},
							lineStyle: {
								color: 'rgba(253, 219, 33, 1)',
							},
							data: [4.0, 4.4, 6.6, 8.5, 12.3, 23.2, ]
						},
					],
				},
				tsjyEchartLeft: null,
				tsjyEchartLeftOption: {
					tooltip: {
						trigger: 'item'
					},
					legend: {
						top: 25,
						padding: [5, 20, 5, 5],
						itemWidth: 20,
						itemHeight: 4,
						textStyle: {
							color: '#fff',
							fontSize: 10,
						},
					},
					series: [{
						type: 'pie',
						radius: ['45%', '46%'],
						center: ['50%', '65%'],
						tooltip: {
							show: false,
						},
						emphasis: {
							disabled: 'disabled',
						},
						labelLine: {
							show: false,
						},
						label: {
							show: false
						},
						data: [{
							value: 25,
							itemStyle: {
								color: '#26DDF2'
							}
						}]
					}, {
						name: '投诉建议',
						type: 'pie',
						radius: ['0%', '40%'],
						center: ['50%', '65%'],
						avoidLabelOverlap: false,
						// emphasis: {
						// 	label: {
						// 		show: true,
						// 		fontSize: 40,
						// 		fontWeight: 'bold'
						// 	}
						// },
						labelLine: {
							show: true,
						},
						label: {
							color: 'inherit',
							fontSize: 10,
							formatter: '{b} {per|{d}%}  ',
							rich: {
								per: {
									fontWeight: 'bold'
								},
							}
						},
						data: [{
								value: 15,
								name: '已逾期',
								itemStyle: {
									color: '#FDDB21'
								}
							},
							{
								value: 35,
								name: '跟进中',
								itemStyle: {
									color: '#DDF7FF'
								}
							},
							{
								value: 25,
								name: '待指派',
								itemStyle: {
									color: '#FD8F21'
								}
							},
							{
								value: 25,
								name: '已完成',
								itemStyle: {
									color: '#26DDF2'
								}
							}
						]
					}]
				},
				tsjyEchartRight: null,
				tsjyEchartRightOption: {
					grid: {
						top: '27%',
						bottom: 30,
						left: 70,
						right: 30,
					},
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'shadow'
						},
						borderColor: 'rgba(43,142,243,0.5)',
						borderWidth: 2,
						textStyle: {
							color: 'rgba(153, 153, 153, 1)',
							fontSize: 10,
							lineHeight: 14
						}
					},
					legend: {
						top: 25,
						itemWidth: 20,
						itemHeight: 4,
						textStyle: {
							color: '#fff',
							fontSize: 10,
						},
						data: [{
							name: '投诉数量',
							itemStyle: {
								color: '#2BC5F3'
							}
						}]
					},
					xAxis: {
						type: 'value',
						splitLine: {
							lineStyle: {
								color: 'rgba(204, 204, 204, .3)',
								type: 'dashed'
							}
						},
						axisLabel: {
							color: '#fff',
							fontSize: 12,
						},
					},
					yAxis: {
						data: ['大岭村委', '凌岗村委', '濠头村委', '张家边张家边', '濠头村委', '凌岗村委'],
						axisLabel: {
							color: '#fff',
							fontSize: 12,
							margin: 19,
							formatter: function(value) {
								let valueTxt = '';
								if (value.length > 4) {
									valueTxt = value.substring(0, 3) + '...';
								} else {
									valueTxt = value;
								}
								return valueTxt;
							}
						},
						axisLine: {
							lineStyle: {
								color: '#fff'
							}
						},
						axisTick: {
							show: false
						},
					},
					series: [{
						name: '投诉数量',
						type: 'bar',
						data: [5, 20, 36, 10, 10, 20],
						itemStyle: {
							color: {
								type: 'linear',
								x: 1,
								y: 0,
								x2: 0,
								y2: 0,
								colorStops: [{
									offset: 0,
									color: 'rgba(43, 197, 243, 1)' // 0% 处的颜色
								}, {
									offset: 1,
									color: 'rgba(43, 197, 243, 0)' // 100% 处的颜色
								}],
								global: false // 缺省为 false
							}
						}
					}, ]
				},
				rcglEchartLeft: null,
				rcglEchartLeftOption: {
					tooltip: {
						trigger: 'item'
					},
					legend: {
						top: 25,
						padding: [5, 20, 5, 5],
						itemWidth: 20,
						itemHeight: 4,
						textStyle: {
							color: '#fff',
							fontSize: 10,
						},
					},
					series: [{
						type: 'pie',
						radius: ['45%', '46%'],
						center: ['50%', '65%'],
						tooltip: {
							show: false,
						},
						emphasis: {
							disabled: 'disabled',
						},
						labelLine: {
							show: false,
						},
						label: {
							show: false
						},
						data: [{
							value: 25,
							itemStyle: {
								color: '#26DDF2'
							}
						}]
					}, {
						name: '投诉建议',
						type: 'pie',
						radius: ['0%', '40%'],
						center: ['50%', '65%'],
						avoidLabelOverlap: false,
						// emphasis: {
						// 	label: {
						// 		show: true,
						// 		fontSize: 40,
						// 		fontWeight: 'bold'
						// 	}
						// },
						labelLine: {
							show: true,
						},
						label: {
							color: 'inherit',
							fontSize: 10,
							formatter: '{b} {per|{d}%}  ',
							rich: {
								per: {
									fontWeight: 'bold'
								},
							}
						},
						data: [{
								value: 15,
								name: '已逾期',
								itemStyle: {
									color: '#FDDB21'
								}
							},
							{
								value: 35,
								name: '跟进中',
								itemStyle: {
									color: '#DDF7FF'
								}
							},
							{
								value: 25,
								name: '待指派',
								itemStyle: {
									color: '#FD8F21'
								}
							},
							{
								value: 25,
								name: '已完成',
								itemStyle: {
									color: '#26DDF2'
								}
							}
						]
					}]
				},
				rcglEchartRight: null,
				rcglEchartRightOption: {
					grid: {
						top: '27%',
						bottom: 30,
						left: 70,
						right: 30,
					},
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'shadow'
						},
						borderColor: 'rgba(43,142,243,0.5)',
						borderWidth: 2,
						textStyle: {
							color: 'rgba(153, 153, 153, 1)',
							fontSize: 10,
							lineHeight: 14
						}
					},
					legend: {
						itemWidth: 20,
						itemHeight: 4,
						textStyle: {
							color: '#fff',
							fontSize: 10,
						},
						data: [{
							name: '巡更次数',
							itemStyle: {
								color: '#2BC5F3'
							}
						}]
					},
					xAxis: {
						type: 'value',
						splitLine: {
							lineStyle: {
								color: 'rgba(204, 204, 204, .3)',
								type: 'dashed'
							}
						},
						axisLabel: {
							color: '#fff',
							fontSize: 12,
						},
					},
					yAxis: {
						data: ['大岭村委', '凌岗村委', '濠头村委', '张家边张家边', '濠头村委', '凌岗村委'],
						axisLabel: {
							color: '#fff',
							fontSize: 12,
							margin: 19,
							formatter: function(value) {
								let valueTxt = '';
								if (value.length > 4) {
									valueTxt = value.substring(0, 3) + '...';
								} else {
									valueTxt = value;
								}
								return valueTxt;
							}
						},
						axisLine: {
							lineStyle: {
								color: '#fff'
							}
						},
						axisTick: {
							show: false
						},
					},
					series: [{
						name: '巡更次数',
						type: 'bar',
						data: [5, 20, 36, 10, 10, 20],
						itemStyle: {
							color: {
								type: 'linear',
								x: 1,
								y: 0,
								x2: 0,
								y2: 0,
								colorStops: [{
									offset: 0,
									color: 'rgba(43, 197, 243, 1)' // 0% 处的颜色
								}, {
									offset: 1,
									color: 'rgba(43, 197, 243, 0)' // 100% 处的颜色
								}],
								global: false // 缺省为 false
							}
						}
					}, ]
				}
			}
		},
		onLoad() {
			this.getTime();
			this.getTemperature();

			setTimeout(_ => {
				if (this.clllEchart) { //关键步骤
					this.clllEchart.dispose()
					this.clllEchart = null
				}
				this.clllEchart = this.$echarts.init(this.$refs.clllEchart);
				this.clllEchart.setOption(this.clllEchartOption);
				tools.loopShowTooltip(this.clllEchart, this.clllEchartOption, {
					loopSeries: true
				});

				this.tsjyEchartLeft = this.$echarts.init(this.$refs.tsjyEchartLeft);
				this.tsjyEchartLeft.setOption(this.tsjyEchartLeftOption);

				this.tsjyEchartRight = this.$echarts.init(this.$refs.tsjyEchartRight);
				this.tsjyEchartRight.setOption(this.tsjyEchartRightOption);
				tools.loopShowTooltip(this.tsjyEchartRight, this.tsjyEchartRightOption, {
					loopSeries: true
				});
				
				this.rcglEchartLeft = this.$echarts.init(this.$refs.rcglEchartLeft);
				this.rcglEchartLeft.setOption(this.rcglEchartLeftOption);

				this.rcglEchartRight = this.$echarts.init(this.$refs.rcglEchartRight);
				this.rcglEchartRight.setOption(this.rcglEchartRightOption);
				tools.loopShowTooltip(this.rcglEchartRight, this.rcglEchartRightOption, {
					loopSeries: true
				});
			}, 100)
		},
		methods: {
			getTime() { // 获取时间
				const wMap = ['日', '一', '二', '三', '四', '五', '六', ]
				const date = new Date()
				const y = date.getFullYear()
				const m = date.getMonth() + 1 >= 10 ? date.getMonth() + 1 : '0' + (date.getMonth() + 1)
				const d = date.getDate() >= 10 ? date.getDate() : '0' + date.getDate()
				const w = wMap[date.getDay()]
				const h = date.getHours() >= 10 ? date.getHours() : '0' + date.getHours()
				const min = date.getMinutes() >= 10 ? date.getMinutes() : '0' + date.getMinutes()
				const s = date.getSeconds() >= 10 ? date.getSeconds() : '0' + date.getSeconds()
				this.time = h + '：' + min + '：' + s
				this.date = y + '-' + m + '-' + d
			},
			getTemperature() { // 设置温度
				uni.request({
					url: "https://restapi.amap.com/v3/weather/weatherInfo?key=ecd60baf0cc86faf25642730ff682823&city=%E4%B8%AD%E5%B1%B1%E5%B8%82&extensions=base",
					success: (e) => {
						this.weather = e.data.lives[0].weather;
						this.temperature = e.data.lives[0].temperature_float + '­°C'
						// console.log('e', e);
					}
				})
			},
		}
	}
</script>

<style>
	@import url(@/static/styles.css);

	.time-weather {
		display: flex;
		position: absolute;
		top: 1.0417vw;
		right: 2.0833vw;
		color: #fff;
		font-family: pmzdbtt;
		text-align: right;
	}

	.time-box {
		padding-right: 1.0417vw;
		margin-right: 1.0417vw;
		line-height: 1;
		position: relative;
	}

	.time-box::after {
		display: block;
		content: '';
		position: absolute;
		top: 0.3646vw;
		right: 0;
		width: 1px;
		height: 1.3021vw;
		background: #FFFFFF;
	}

	.time {
		font-size: 1.25vw;
	}

	.date {
		padding-top: 0.1563vw;
		font-size: 0.6771vw;
	}

	.weather-box view:nth-child(1) {
		font-size: 0.7292vw;
		line-height: 1.0417vw;
	}

	.weather-box view:nth-child(2) {
		font-size: 0.8854vw;
		line-height: 1.25vw;
	}
</style>